{extend name="property/public/insidePageBase" /}
{block name="title"}账单编辑{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-form-item">
                        <label class="layui-form-label">房间信息</label>
                        <div class="layui-input-block">
                            <input type="text" value="{$info['full_room_name']??''}" disabled  placeholder="房间信息" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账单编号</label>
                        <div class="layui-input-block">
                            <input type="text" value="{$info['number']??'0.0000'}" disabled  placeholder="账单编号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-form-item">
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;应收总额&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <input type="text" value="{$info['ar_amount']??'0.0000'}"  disabled  class="layui-input">
                        <div class="layui-input-split layui-input-suffix"> ¥</div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;待收金额&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <input type="text" value="{$info['stay_check_amount']??'0.0000'}"  disabled  class="layui-input">
                        <div class="layui-input-split layui-input-suffix"> ¥</div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;已收金额&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <input type="text" value="{$info['check_Amount']??'0.0000'}"  disabled  class="layui-input">
                        <div class="layui-input-split layui-input-suffix"> ¥</div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;账单最晚&nbsp;&nbsp;&nbsp;&nbsp;</div>
                    <input type="text" value="{$info['cutoff_date']??''}" disabled autocomplete="off" class="layui-input" placeholder="账单逾期天数">
                    <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;支付，逾期每日收取账单总金额&nbsp;&nbsp;&nbsp;&nbsp;</div>
                    <input type="text" value="{$info['overdue_fine_fee']??''}" disabled autocomplete="off" class="layui-input" placeholder="账单逾期天数">
                    <div class="layui-input-split layui-input-suffix"> % 的滞纳金</div>
                </div>
            </div>

            {if $info.overdue_day >= 1}
                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;账单己逾期&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <input type="text" value="{$info['overdue_day']??''}" disabled autocomplete="off" class="layui-input" placeholder="账单逾期天数">
                        <div class="layui-input-split layui-input-suffix"> 日共产生</div>
                        <input type="text" value="{$info['overdue_fine']??''}" disabled autocomplete="off" class="layui-input" placeholder="滞纳金金额">
                        <div class="layui-input-split layui-input-suffix">¥ 滞纳金, 己催缴次数</div>
                        <input type="text" value="{$info['urge_num']??''}" disabled autocomplete="off"  class="layui-input" placeholder="滞纳金金额">
                        <div class="layui-input-split layui-input-suffix"> 次</div>
                    </div>
                </div>
            {/if}
            <table class="layui-hide" id="billCatalogList" lay-filter="billCatalogList"></table>
            <script type="text/html" id="start-end-date-tpl">
                {{# if(d.start_date) { }}{{d.start_date}} - {{d.end_date}}{{# } }}
            </script>
            <script type="text/html" id="use-num-tpl">
                {{# if( d.use_num > 0) { }}
                    <span> {{d.use_num}} </span>
                {{# }else{ }}
                    <span> -- {{d.use_num}}</span>
                {{# } }}
            </script>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark">{$info['remark']}</textarea>
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <button type="button" class="layui-btn layui-btn-primary replaceUploadImg toggleUpload" lay-data="{}"></button>
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer','table'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,table = layui.table;
        <!-- 账单明细 add-->
        var tableId = 'billCatalogList';
        table.render({
            elem: '#'+tableId,
            id:tableId,
            url: '{:url("propertyBillCatalogList")}?bill_id={$info['id']}',
            cols: [[
                {field: 'full_cate_name', width: 168, title: '费用类别', sort: true},
                {field: 'start_end_date_tpl', width: 187, title: '计费周期', sort: true, templet:'#start-end-date-tpl'},
                {field: 'use_num', width: 108, title: '本期用量', sort: true, templet:'#use-num-tpl'},
                {field: 'amount', width: 108, title: '小计金额', sort: true},
                {field: 'overdue_fine', width: 88, title: '滞纳金', sort: true},
                {field: 'total_amount', minWidth: 108, title: '合计金额', sort: true},
            ]],
        });

        form.on('submit(data-search-btn)', function (data) {table.reload(tableId, {page: { curr: 1  }, where: data.field}, 'data'); return false; });
        table.on('toolbar('+tableId+')', function (obj) {
            if (obj.event === 'addOther') {
                var url = '{:url("propertyBillCatalogAddOther")}?bill_id={$info['id']}';
                var index = layer.open({title: '添加其它费用', type: 2, shade: 0.2,maxmin:true, area: ['650px', '90%'], content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tableId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'addReduced') {
                var url = '{:url("propertyBillCatalogAddReduced")}?bill_id={$info['id']}';
                var index = layer.open({title: '添加优惠费用', type: 2, shade: 0.2,maxmin:true, area: ['650px', '90%'], content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tableId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'addBasic') {
                var url = '{:url("propertyBillCatalogAddBasic")}?bill_id={$info['id']}';
                var index = layer.open({title: '添加基本费用', type: 2, shade: 0.2,maxmin:true, area: ['800px', '90%'], content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tableId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }  else if (obj.event === 'addEnergy') {
                var url = '{:url("propertyBillCatalogAddEnergy")}?bill_id={$info['id']}';
                var index = layer.open({title: '添加能源费用', type: 2, shade: 0.2,maxmin:true, area: ['650px', '90%'], content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tableId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus(obj.config.id),data = checkStatus.data;
                var data = checkStatus.data, id = [];
                for (elem in data) {
                    id.push(data[elem].id);
                }
                if (id.length === 0) {
                    return layer.msg('请选择要删除的数据');
                }
                var url = '{:url("propertyBillCatalogDel")}';
                layer.confirm('删除后不可恢复！  是否确认? ', {icon: 3}, function () {
                    var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                    $.post(url, {ids: id}, function (res) {
                        layer.close(loadAdd);
                        if (res.code === 0) {
                            table.reload(tableId); //数据刷新
                            layer.msg(res.msg, {icon: 6, offset: '15px'});
                        } else {
                            layer.msg(res.msg, {icon: 5, offset: '15px'});
                        }
                    });
                });
            }
        });

        table.on('tool('+tableId+')', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var url = '{:url("propertyBillCatalogEdit")}?id='+data.id;
                var index = layer.open({
                    title: '编辑账单 ' + data.full_cate_name, type: 2,  shade: 0.2, maxmin:true, area:['800px', '80%'],content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tableId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'details') {
                var url = '{:url("propertyBillCatalogDetail")}?catalog_id=' + data.id;
                var index = parent.layer.open({title: data.full_cate_name + ' 详情 ', type: 2,   shade: 0.2, maxmin: true, shadeClose: true,  move: false, area: ['1000px', '100%'],  offset: 'rt',anim: 2, content: url, btn: false});
                return false;
            } else if (obj.event === 'delete') {
                var url = '{:url("propertyBillCatalogDel")}';
                layer.confirm('删除后不可恢复！  是否确认? ', {icon: 3}, function () {
                    var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                    $.post(url, {ids: [data.id]}, function (res) {
                        layer.close(loadAdd);
                        if (res.code === 0) {
                            table.reload(tableId); //数据刷新
                            layer.msg(res.msg, {icon: 6, offset: '15px'});
                        } else {
                            layer.msg(res.msg, {icon: 5, offset: '15px'});
                        }
                    });
                });
            }
        });
        <!-- 账单明细 end-->

    });
</script>
{/block}